<template>
  <div class="printData-container app-container">
    <el-tabs v-model="activeName"  type="border-card" @tab-click="handleClick">
      <el-tab-pane label="外来人员" name="WLRY">
          <WLRY v-if="isChildUpdate1"></WLRY>
      </el-tab-pane>
      <el-tab-pane label="外来承包商" name="WLCBS">
          <WLCBS v-if="isChildUpdate2"></WLCBS>
      </el-tab-pane>
      <el-tab-pane label="外来供应商" name="WLGYS">
        <WLGYS v-if="isChildUpdate3"></WLGYS>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import WLRY from './wlry'
  import WLCBS from "./wlcbs"
  import WLGYS from "./wlgys"
  export default {
    name: "extend-printData",
    data() {
      return {
        activeName: 'WLRY',
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false
      }
    },
    components:{WLRY,WLCBS,WLGYS},
    methods: {
      handleClick(tab) {
          if(tab.name == "WLRY") {
              this.isChildUpdate1 = true;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = false;
          } else if(tab.name == "WLCBS") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = true;
              this.isChildUpdate3 = false;
          } else if(tab.name == "WLGYS") {
              this.isChildUpdate1 = false;
              this.isChildUpdate2 = false;
              this.isChildUpdate3 = true;
          }
      }
    }
  }
</script>
<style lang="scss" scoped>
.printData-container {
  .el-tabs {
    width: 100%;
    height: 100%;
  }
  padding: 0;
  >>> .el-table thead.is-group th {
    background: #fff !important;
  }
  .prtBtn {
    position: absolute;
    right: 28px;
    top: 4px;
    z-index: 1;
  }
  >>> .el-tabs__content {
    height: calc(100% - 39px);
    .el-tab-pane {
      height: 100%;
    }
  }
  >>> .storage {
    width: 100%;
    margin: 0 auto;
    .el-table thead tr,
    .el-table thead tr th {
      color: #606266;
    }
  }
  >>> .el-table {
   width: 100%;
    margin: 0 auto;
    thead {
      color: #606266;
    }
  }
  >>> .bill {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .bill-title {
      color: #606266;
    }
  }
}
</style>